/*
 * @Date: 2024-01-12 08:46:46
 * @LastEditors: lyx
 * @LastEditTime: 2024-01-12 09:18:41
 * @FilePath: \chlor-alkali-cloud-mobile-end\src\pages\taskHistory\index.tsx
 * @Description:
 */
import { Tabs } from "@nutui/nutui-react-taro";
import { View } from "@tarojs/components";
import React, { useState } from "react";
import styles from "./index.module.scss";
import BaseLayout from "@/components/BaseLayout";
import useTaskHistory from "./hooks/useTaskHistory";
import BatchOptionFooter from "./components/BatchOptionFooter";

function TaskHistory() {
  const [tab2value, setTab2value] = useState("0");
  const [list, setList] = useState<any[]>([
    1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8,
  ]);

  const taskHistoryInst = useTaskHistory();
  return (
    <View className={styles["task-history-wrapper"]}>
      <BaseLayout.Layout>
        <BaseLayout.Body className="bg-gray">
          <Tabs
            value={tab2value}
            style={{ position: "sticky", top: "0px", zIndex: 11 }}
            onChange={(value) => {
              console.log("value", value);
              setTab2value(value);
              if (value === 0) {
                setList([1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8]);
              } else if (value === 1) {
                setList([
                  1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5,
                  6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8,
                ]);
              } else {
                setList([1, 2]);
              }
            }}
          >
            <Tabs.TabPane title="Tab 1"></Tabs.TabPane>
            <Tabs.TabPane title="Tab 2"></Tabs.TabPane>
            <Tabs.TabPane title="Tab 3"> </Tabs.TabPane>
          </Tabs>
          <View className={styles["content"]}>
            {list.map((item, index) => (
              <p
                key={index}
                onClick={() => {
                  taskHistoryInst.handleClick();
                }}
              >
                Tab 1
              </p>
            ))}
          </View>
        </BaseLayout.Body>
        {taskHistoryInst.isBatchOption && (
          <BaseLayout.Foot className="bg-white">
            <BatchOptionFooter />
          </BaseLayout.Foot>
        )}
      </BaseLayout.Layout>
    </View>
  );
}

export default TaskHistory;
